{% extends 'df_goods/base.html' %}
{% load static %}
{% block head %}
<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}" xmlns:width="http://www.w3.org/1999/xhtml"></script>
    <script type="text/javascript">
        var gnum = 0;
        $(function(){
            // 点击编辑框，编辑数字，失去焦点后触发
            $(".num_show").blur(function(){
                num = $(".num_show").val();
                pattern = /^\d+$/; // 正则匹配整数
                if(!pattern.test(num)) {
                    alert('输入内容非数字');
                    num = gnum;
                    $(".num_show").val(num);
                    return;
                }
                if(num > 99) {
                    num = 99;
                    $(".num_show").val(num);
                } else if(num < 1) {
                    num = 1;
                    $(".num_show").val(num);
                }
                gnum = num;
                // 总价需要改变
                total = num * {{goods.gprice}};
                $("#total").html(total.toFixed(2) + '元'); // toFixed(2)保留2位小数
            });
        });
        // 数量加1的函数
        function add() {
            // 编辑框的数量增加
            num = $(".num_show").val();
            if(num < 99) {
                num++;
                $(".num_show").val(num);

            }
            // 总价需要改变
            total = num * {{goods.gprice}};
            $("#total").html(total.toFixed(2) + '元'); // toFixed(2)保留2位小数

        }
        // 数量减1的函数
        function minus() {
            // 编辑框的数量减少
            num = $(".num_show").val();
            if(num > 1) {
                num--;
                $(".num_show").val(num);

            }
            // 总价需要改变
            total = num * {{goods.gprice}};
            $("#total").html(total.toFixed(2) + '元'); // toFixed(2)保留2位小数

        }

    </script>

{% endblock head %}
{% block detail %}
    <div class="goods_detail_con clearfix">
		{% if goods %}
        <div class="goods_detail_pic fl"><img src="{{STATIC_URL}}{{goods.gpic}}" width="350px" height="350px"></div>
        <div class="goods_detail_list fr">
            <h3>{{goods.gtitle}}</h3>
            <p>{{goods.gjianjie}}</p>
            <div class="prize_bar">
                <span class="show_pirze">¥<em>{{goods.gprice}}</em></span>
                <span class="show_unit">单  位：{{goods.gunit}}</span>
            </div>
            <div class="goods_num clearfix">
                <div class="num_name fl">数 量：</div>
                <div class="num_add fl">
                    <input type="text" class="num_show fl" value="1">
                    <a href="javascript:add();" class="add fr">+</a>
                    <a href="javascript:minus();" class="minus fr">-</a>
                </div>
            </div>
            <div class="total">总价：<em  id="total">{{goods.gprice}}</em></div>
		{% endif %}
            <div class="operate_btn">
                <a href="javascript:;" class="buy_btn">立即购买</a>
                <a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>                
            </div>
        </div>
    </div>
{% endblock detail %}
{% block list %}

        <div class="r_wrap fr clearfix">
            <ul class="detail_tab clearfix">
                <li class="active">商品介绍</li>
                <li>评论</li>
            </ul>
				{% if goods %}
            <div class="tab_content">
                <dl>
                    <dt>商品详情：</dt>
                    <dd>{{goods.gcontent}}</dd>
                </dl>
            </div>
        </div>
				{% endif %}
{% endblock list %}
{% block extras %}
    <div class="add_jump"></div>

    <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script type="text/javascript">
        var $add_x = $('#add_cart').offset().top;
        var $add_y = $('#add_cart').offset().left;

        var $to_x = $('#show_count').offset().top;
        var $to_y = $('#show_count').offset().left;

        $(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'})
        $('#add_cart').click(function(){
            $(".add_jump").stop().animate({
                'left': $to_y+7,
                'top': $to_x+7},
                "fast", function() {
                    $(".add_jump").fadeOut('fast',function(){
                        count = $(".num_show").val();
                        url = '/cart/add' + {{goods.id}} + '_' + count;
                        $.get(url, function(data){
                            $('#show_count').html(data.count);
                            window.location.replace(location.href)
                        });
                    });

            });
        })
    </script>
{% endblock extras %}